import View from 'ol/View'
import './style.css'
import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'

const target = 'map'

const view = new View({
    center: [114.3165, 30.5953],
    zoom: 10,
    projection: 'EPSG:4326'
})

// 城市图层
const citySource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
})

// 卫星图层
const satelliteSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
})

// 标记图层
const markSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}'
})

const cityLayer = new TileLayer({
    source: citySource
})

const satelliteLayer = new TileLayer({
    source: satelliteSource
})

const markLayer = new TileLayer({
    source: markSource
})


const map = new Map({
    target,
    view,
    layers: [markLayer, satelliteLayer, cityLayer]
})

// 切换图层
const [btn1, btn2] = document.querySelectorAll('.btn button')

// 切换城市图层
btn1.addEventListener('click', () => {
    // 控制图层显示与隐藏方法一： 设置图层的层级
    // cityLayer.setZIndex(100)
    // satelliteLayer.setZIndex(30)
    // markLayer.setZIndex(50)

    // 控制图层显示与隐藏方法二： 添加图层
    // map.addLayer(cityLayer)

    // 控制图层显示与隐藏方法三： 设置图层的可见性
    cityLayer.setVisible(true)
})

// 切换卫星图层
btn2.addEventListener('click', () => {
    // 控制图层显示与隐藏方法一：设置图层的层级
    // cityLayer.setZIndex(30)
    // satelliteLayer.setZIndex(100)
    // markLayer.setZIndex(50)

    // 控制图层显示与隐藏方法二： 移除图层
    // map.removeLayer(cityLayer)

    // 控制图层显示与隐藏方法三： 设置图层的可见性
    cityLayer.setVisible(false)
})